<template>
  <div class="postpublish">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="JavaScript:;">文章管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>文章发布</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top: 20px">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="文章标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="文章类型">
          <el-radio-group v-model="form.type">
            <el-radio :label="1">文章</el-radio>
            <el-radio :label="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容">
          <!-- 文章 -->
          <VueEditor v-if="form.type == 1" :config="config" ref="vueEditor" />
          <!-- 视频 -->
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:3000/upload"
            v-if="form.type === 2"
            :headers="gettoken()"
            :on-success="upVideo"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传视频文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="栏目">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="v in cityOptions" :label="v.id" :key="v.id">{{
              v.name
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="封面:">
          <el-upload
            :headers="gettoken()"
            action="http://127.0.0.1:3000/upload"
            list-type="picture-card"
            :on-success="upImgsuccess"
            :on-remove="removeImg"
            :file-list="form.cover"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即发布</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCategory, postList, getArticle, postArticle } from "@/api/artical";
import myaxios from "@/util/myaxios";
//
import VueEditor from "vue-word-editor";
import "quill/dist/quill.snow.css";
export default {
  components: {
    VueEditor,
  },

  data() {
    return {
      form: {
        title: "",
        content: "",
        categories: [],
        cover: [],
        type: 1,
      },
      articalID: "", //
      cityOptions: [], //栏目数据
      checkAll: false,
      checkedCities: [],
      // cities: [],
      isIndeterminate: true,
      config: {
        // 上传图片的配置
        uploadImage: {
          url: "http://127.0.0.1:3000/upload",
          name: "file",
          headers: this.gettoken(),
          // res是结果，insert方法会把内容注入到编辑器中，res.data.url是资源地址
          uploadSuccess(res, insert) {
            console.log(res);
            insert("http://127.0.0.1:3000" + res.data.data.url);
          },
        },

        // 上传视频的配置
        uploadVideo: {
          url: "http://127.0.0.1:3000/upload",
          name: "file",
          headers: this.gettoken(),
          uploadSuccess(res, insert) {
            console.log(res);
            insert("http://127.0.0.1:3000" + res.data.data.url);
          },
        },
      },
    };
  },
  methods: {
    // 提交
    async onSubmit() {
      if (this.form.type == 1) {
        this.form.content = this.$refs.vueEditor.editor.root.innerHTML;
      }
      this.form.categories = this.checkedCities.map((item) => {
        return { id: item };
      });

      console.log(this.form);

      if (this.articalID) {
        const res = await postArticle(this.articalID, this.form);
        this.$message.success(res.data.message);
      } else {
        const res = await postList(this.form);
        this.$message.success(res.data.message);
      }
      this.$router.push({ name: "postlist" });
    },
    // 获取token
    gettoken() {
      return {
        Authorization: localStorage.getItem("heima_houtai"),
      };
    },
    // 表单数据
    // 上传图片
    upImgsuccess(response, file, fileList) {
      console.log(response);
      this.form.cover.push({
        // url: myaxios.defaults.baseURL + response.data.url,
        id: response.data.id,
      });
    },
    // 上传视频
    upVideo(res) {
      console.log(res);
      this.form.content = myaxios.defaults.baseURL + res.data.url;
    },
    // 移除图片
    removeImg(file) {
      this.form.cover = this.form.cover.filter((item) => {
        return item.id != file.id;
      });
      // console.log(this.form.cover);
    },
    //
    handleCheckAllChange(val) {
      let temp = val ? this.cityOptions : [];
      this.checkedCities = temp.map((item) => {
        return item.id;
      });
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      // console.log(value, 1);
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cityOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cityOptions.length;
    },
  },
  async mounted() {
    let res = await getCategory();
    // console.log(res);
    // 返回的栏目带有头条和关注.去掉
    res.data.data.splice(0, 2);
    this.cities = this.cityOptions = res.data.data;
    // console.log(this.$route.params);

    // 编辑
    if (this.$route.params.id) {
      this.articalID = this.$route.params.id;
      res = await getArticle(this.articalID);
      console.log(res);
      this.form.title = res.data.data.title;
      var quill = this.$refs.vueEditor.editor;
      quill.clipboard.dangerouslyPasteHTML(0, res.data.data.content);
      this.form.type = res.data.data.type;
      this.checkedCities = res.data.data.categories.map((item) => {
        return item.id;
      });
      this.form.cover = res.data.data.cover.map((item) => {
        return { id: item.id, url: myaxios.defaults.baseURL + item.url };
      });
      console.log(this.form.cover);
    }
  },
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 20px;
}
</style>
